<template>
  <el-dialog :title="title" width="800" close-on-press-escape v-model="models">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      @open="createxinxi"
    >
      <el-form-item label="角色ID" prop="id">
        <el-input v-model="ruleForm.id" />
      </el-form-item>

      <el-form-item v-if="type !== 'del'" label="角色名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>

      <el-form-item v-if="type !== 'del'" label="角色编码" prop="code">
        <el-input v-model="ruleForm.code" />
      </el-form-item>

      <el-form-item v-if="type !== 'del'" label="角色状态" prop="delivery">
        <el-switch
          v-model="ruleForm.status"
          inline-prompt
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.prevent="submitForm"> 提交 </el-button>
        <el-button @click.prevent="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { type ComponentSize, type FormRules } from 'element-plus'
import { type RolesType } from '@/views/study5/service/study1/demo3'

const models = defineModel()

const formSize = ref<ComponentSize>('default')

const props = defineProps<{
  ruleForm: RolesType
  ruleFormInfo: { type: string; title: string }
  rules: FormRules<RolesType>
  ruleFormRef: any
}>()

const ruleForm = ref(props.ruleForm)
const ruleFormRef = ref(props.ruleFormRef)

const title = ref('')
const type = ref('')
watch(
  () => props.ruleFormInfo,
  (newVal) => {
    // console.log(newVal, 'oooooo')
    title.value = newVal.title
    type.value = newVal.type
    console.log(models.value, '999999')
  }
)

const emit = defineEmits(['resetForm', 'submitForm'])

const submitForm = () => {
  emit('submitForm', ruleFormRef.value)
  // console.log(ruleForm.value.id, '00000')
}

const resetForm = () => {
  emit('resetForm', ruleFormRef.value)
}

const createxinxi = () => {
  // rule = {
  //   code: '',
  //   createTime: '',
  //   name: '',
  //   sort: 1,
  //   status: 1
  // }
}
watch(
  () => props.ruleFormInfo.type,
  (newMode) => {
    if (newMode === 'add') {
      ruleFormRef.value = {
        code: '',
        createTime: '',
        name: '',
        sort: 1,
        status: 1
      }
      console.log(newMode, 'kaodadj')

      return
    }
  }
)

defineExpose({
  // createxinxi
})
</script>
